<template>
  <view class="area-filter">
    <!-- 标题 -->
    <view class="filter-title">选择区域</view>

    <!-- 区域列表 -->
    <view class="area-list">
      <view
        v-for="(city, index) in cityList"
        :key="index"
        class="area-item"
        :class="{ 'area-item-selected': isSelected(city.provinceid) }"
        @click="toggleArea(city)"
      >
        <text class="area-name">{{ city.provincename }}</text>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="btn-group">
      <view @click="resetSelection" class="reset-btn"> 重置 </view>
      <view @click="confirmSelection" class="confirm-btn"> 确认 </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 城市区域列表
    cityList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedAreas: [], // 选中的区域列表
    };
  },
  methods: {
    // 判断区域是否被选中
    isSelected(id) {
      return this.selectedAreas.some((area) => area.provinceid === id);
    },

    // 切换区域选中状态
    toggleArea(city) {
      const isSelected = this.isSelected(city.provinceid);

      if (isSelected) {
        // 取消选中
        this.selectedAreas = this.selectedAreas.filter(
          (area) => area.provinceid != city.provinceid
        );
      } else {
        // 选中：检查是否超过5个
        if (this.selectedAreas.length >= 5) {
          uni.showToast({
            title: "最多只能选择5个区域",
            icon: "none",
            duration: 1000,
          });
          return;
        }
        this.selectedAreas.push(city);
      }
    },

    // 重置选中状态
    resetSelection() {
      this.selectedAreas = [];
    },

    // 确认选中结果
    confirmSelection() {
      console.log("this.selectedAreas",this.selectedAreas);
      this.$emit("confirm", this.selectedAreas);
    },
  },
};
</script>

<style scoped>
.area-filter {
  display: flex;
  flex-direction: column;
}

.filter-title {
  padding: 38rpx 0 28rpx 0;
  text-align: center;
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 30rpx;
  color: #222222;
  line-height: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 200;
  background: #ffffff;
}

.area-list {
  flex: 1;
  padding: 24rpx;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
  padding: 110rpx 20rpx;
}

.area-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14rpx 22rpx;
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 24rpx;
  height: 52rpx;
  color: #515151;
  line-height: 24rpx;
  position: relative;
  justify-content: space-between;
  background: #f5f5f5;
  border-radius: 63rpx 63rpx 63rpx 63rpx;
}

.area-item-selected {
  background: #f04646;
  border-radius: 63rpx 63rpx 63rpx 63rpx;
  color: #ffffff;
}

.area-name {
  margin-right: 8rpx;
}

.btn-group {
  display: flex;
  padding: 24rpx;
  gap: 24rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding-bottom: env(safe-area-inset-bottom); /* 考虑安全区域 */
}

.reset-btn {
  flex: 1;
  display: flex;
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 28rpx;
  color: #515151;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 80rpx 80rpx 80rpx 80rpx;
  padding: 24rpx 0;
}

.confirm-btn {
  display: flex;
  flex: 1;
  color: #fff;
  background: #f04646;
  border-radius: 80rpx 80rpx 80rpx 80rpx;
  font-family: MiSans, MiSans;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: #ffffff;
  padding: 24rpx 0;
}
</style>
